<template>
  <div class="container">
    <div class="topbox">
      <img v-src="'wxStatic/img/index/indexBanner.jpg'" alt="">
    </div>
    <div class="moduleBox flex-list">
      <div class="nodule_item flex-grow-0" @click="jumpTo(item.toUrl)" v-for="(item,index) in tenModule">
        <img style="width:0.95rem;" v-lazy="item.icon" alt="">
        <div>{{item.title}}</div>
      </div>
    </div>
    <swiper height="2.39rem" :auto="true" :loop="true" dots-position="center" :interval=2000>
      <swiper-item :key="index" v-for="(item,index) in swiperImg">
        <img :src="item" alt="">
      </swiper-item>
    </swiper>
    <div class="list-title flex-row flex-y-center">
      <div class="flex-grow-1">
        <div class="flex-grow-0 left-title flex-y-center">
          <div class="shuxing"></div>
          推荐二手房
        </div>

      </div>
      <div class="flex-grow-1 right-title flex-right">
        <div>
          更多
          <div></div>
        </div>
      </div>
    </div>
    <button v-show="false" @click="login">login</button>
    <div class="flex-list listBox">
      <div @click="todetails(item.id)" class="houseList vux-1px" v-for="(item,index) in list">
        <div class="imgbox">
          <img v-lazy="item.IndexImagePath" alt="">
          <div class="flex-grow-0 price flex-y-center">￥ {{item.totalPrice}}万</div>
        </div>
        <div class="item-info">
          <p class="name">{{item.Community}}</p>
          <p class="desc">{{item.jifang}} / {{item.AreaStr}}</p>
          <p class="desc2">{{item.zhungxiu_type}} / {{item.dan_price}}元/㎡</p>
        </div>
      </div>
    </div>


    <tab-footer></tab-footer>

  </div>
</template>

<script>
  import {Swiper, SwiperItem} from 'vux'
  import {URI_GETHOUSELIST, GETWXCONFIG, Wx_LOGIN} from 'src/const/shareUri'
  import TabFooter from 'src/components/TabFooter'
  import wx from 'weixin-js-sdk'

  let cdn = cdnBase;
  import {jumpUrlConfig} from 'src/const/jumpUrlConfig'

  export default {
    name: "Index",
    components: {SwiperItem, Swiper, TabFooter},
    data() {
      return {
        tenModule: [
          {icon: cdn + '/wxStatic/img/index/index01.png', title: '二手房', toUrl: jumpUrlConfig.SecondHouseUrl},
          {icon: cdn + '/wxStatic/img/index/index02.png', title: '租房', toUrl: jumpUrlConfig.RentingHouseUrl},
          {icon: cdn + '/wxStatic/img/index/index03.png', title: '租房登记', toUrl: jumpUrlConfig.RentingUrl},
          {icon: cdn + '/wxStatic/img/index/index04.png', title: '买房登记', toUrl: jumpUrlConfig.buyHouseUrl},
          {icon: cdn + '/wxStatic/img/index/index05.png', title: '有房出售', toUrl: jumpUrlConfig.HaveHouseSell},
          {icon: cdn + '/wxStatic/img/index/index06.png', title: '有房出租', toUrl: jumpUrlConfig.HouseToLet},
          {icon: cdn + '/wxStatic/img/index/index07.png', title: '新楼盘', toUrl: jumpUrlConfig.newHouseUrl},
          {
            icon: cdn + '/wxStatic/img/index/index08.png',
            title: '贷款计算',
            toUrl: 'https://tool.fooww.com/calculator/mobile/?themeColor=3492e9'
          },
        ],
        swiperImg: [
          cdn + '/wxStatic/img/index/ad1.jpg', cdn + '/wxStatic/img/index/ad2.jpg', cdn + '/wxStatic/img/index/ad3.jpg'
        ],
        list: []
      }
    },
    created() {
      // let shareObj = {
      //   title: '孝感瑞祥房产中介公司',
      //   desc: '诚信服务，专业二手房；欢迎你来',
      //   link: window.location.href,
      //   imgUrl: 'https://www.zetianhui.xyz/static/img/zth_logo.png',
      // };
      // //分享给朋友
      // this.$wechat.onMenuShareAppMessage(shareObj);
      //
      // //分享到朋友圈
      // this.$wechat.onMenuShareTimeline(shareObj);
      //
      // //分享到QQ
      // this.$wechat.onMenuShareQQ(shareObj);
    },
    mounted() {
      this.initData();
      this.$nextTick(() => {
        this.getConfig();
      })
    },
    methods: {
      initData() {
        this.$ajax.get(URI_GETHOUSELIST, {}, res => {
          this.list = res.data;
        });
      },
      getConfig() {
        //let url = location.href.split('#')[0] //获取锚点之前的链接
        this.$ajax.get(GETWXCONFIG, {
          url: encodeURIComponent(window.location.href)
        }, res => {
          this.wxInit(res)
        });
      },
      wxInit(res) {
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: res.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
          timestamp: res.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.nonceStr, // 必填，生成签名的随机串
          signature: res.signature,// 必填，签名，见附录1
          jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ']
        });
        wx.ready(function () {
          let shareObj = {
            title: '孝感瑞祥房产中介公司',
            desc: '诚信服务，专业二手房；欢迎你来',
            link: window.location.href,
            imgUrl: 'https://www.zetianhui.xyz/static/img/zth_logo.png',
          };
          //分享给朋友
          wx.onMenuShareAppMessage(shareObj);

          //分享到朋友圈
          wx.onMenuShareTimeline(shareObj);

          //分享到QQ
          wx.onMenuShareQQ(shareObj);
        })
      },
      todetails(id) {
        let toUrl = document.URL.replace(/index/g, "houseDetails").split('?')[0];
        toUrl += '?id=' + id;
        //window.location.href = location.origin + '/houseDetails.html?id=' + id;
        window.location.href = toUrl
      },
      jumpTo(url) {
        window.location.href = url;
      },
      login() {
        var appid = 'wx41c44abd02b498e1';
        var redirectUri = encodeURIComponent(Wx_LOGIN); // 授权接口地址
        var state = "abc";
        var scope = 'snsapi_base';//snsapi_base //snsapi_userinfo
        var url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirectUri}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`;
        window.location.href = url;
      }
    }
  }
</script>

<style lang="less" scoped>
  .container {
    padding-bottom: 50px;
  }

  .moduleBox {
    font-size: 0.26rem;
    padding: 0.3rem 0.4rem .1rem;
    border-top: 0.18rem solid #ececec;
    border-bottom: 0.18rem solid #ececec;
    color: #2c2c2c;
    .nodule_item {
      width: 1.5rem;
      text-align: center;
      > div {
        margin-top: 0.1rem;
        margin-bottom: 0.2rem;
      }
    }
  }

  .list-title {
    height: .99rem;
    border-bottom: 1px solid #eaeaea;
    border-top: 0.18rem solid #ececec;
    padding-left: .17rem;
    padding-right: .25rem;
    .shuxing {
      display: inline-block;
      width: .08rem;
      height: .39rem;
      background: #3593e3;
      margin-right: .2rem;
    }
    .left-title {
      font-size: .3rem;
      font-weight: bold;
      color: #323232;
    }
    .right-title {
      font-size: .28rem;
      color: #6b6b6b;
    }
  }

  .listBox {
    padding: .18rem .18rem 0;
  }

  .houseList {
    width: 3.48rem;
    margin-bottom: .18rem;
    .imgbox {
      position: relative;
      width: 3.48rem;
      height: 2.61rem;
      overflow: hidden;
      > img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .price {
        background: rgba(0, 0, 0, .5);
        position: absolute;
        left: 0;
        bottom: .25rem;
        padding: 0 0.12rem;
        color: #fff;
        height: .45rem;
        font-size: .26rem;
        border-radius: 0 5px 5px 0;
      }
    }
    .name {
      font-size: 0.28rem;
      font-weight: 700;
      color: #333;
    }
    .item-info {
      padding: 6px 8px;
    }
    .desc, .desc2 {
      font-size: .24rem;
      height: 22px;
      line-height: 22px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

</style>